Planning a trip with friends, without the group chat.

The problem

Death by small decisions

Planning a trip with friends means constant small decisions about where to eat, who is coming, and who paid for what, and today those get scattered across multiple apps, group chats and screenshots which leaves one person holding the whole thing together.

Information architecture

Two levels deep, on purpose.

The structure follows how a trip is actually used. Home lists the trips with the current one first, and each trip is a hub with four tabs: Itinerary, Explore, Chat and Expenses. Every action lives one level below the tab it belongs to, so polls open from the itinerary, splitting opens from an expense, and inviting opens from the member list. Nothing important sits more than two taps from the hub.

Wireframes

Structure before style

The wireframes started from the three things a group actually does on a trip: make a decision, add an expense, and settle up. Each was drawn in greyscale with real copy and no color, then laid out as a connected flow rather than isolated screens, which made the gaps obvious. Visual design only started once all three held up end to end.

Inside a trip

Four sections, one trip

A trip is split into four sections that stay in the same place for the whole journey: the plan, the places, the conversation and the money. Everything the group does happens inside one of them.

Core flows

Three moments that matter

Designing TagAlong I focused on the three moments where a group trip creates the most friction: making a decision in the moment, splitting an expense, and settling up. They are the points where people give up on the app and fall back to the group chat, so getting them right matters more than covering every screen.

Final design

Warm ground, one accent

The interface is clean and minimal: warm paper tones carry the screens, with a single coral accent reserved for the one action that matters on each of them, whether that is vote, pay, or invite. Cards, avatars, buttons and the tab bar are built as reusable components on shared color and type tokens, so the whole product reads as one system.

Takeaways

What I took away from it.

Tagalong started as a planning app and turned into a money app halfway through. Once expenses entered the picture, every screen had to answer two questions at once, what we are doing and who owes what, and keeping those two layers in the same product without doubling the interface was the real design work.

• Designed decisions and expenses as one system instead of two separate tools
• Reserved a single accent for the one action that matters on each screen
• Built the UI on shared tokens and components, so the product scales past twelve screens
• Prototyped the flows end to end to test where a group actually drops out